<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-09-27 16:48:55
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-10-24 14:19:47
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-09-27 16:48:55
-->
<template>
  <view
    v-if="computedVisible"
    class="arco-modal-container"
    @touchmove.stop.prevent
  >
    <view v-if="mask" class="arco-modal-mask"></view>
    <view
      class="arco-modal-wrapper arco-modal-wrapper-align-center"
      @click="handleMaskClick"
    >
      <view :class="classNames" @click.stop>
        <view class="arco-modal-header">
          <view class="arco-modal-title">
            <slot name="title">
              {{ title }}
            </slot>
          </view>
          <view class="arco-modal-close-btn" @click="handleCancel">
            <text class="arco-icon iconfont icon-guanbi1"></text>
          </view>
        </view>
        <view class="arco-modal-body">
          <slot></slot>
        </view>
        <view v-if="footer" class="arco-modal-footer">
          <a-button
            v-if="!hideCancel"
            type="text"
            shape="round"
            status="normal"
            @click="handleCancel"
            >{{ cancancelText }}</a-button
          >
          <a-button type="text" shape="round" @click="handok">{{
            okokText
          }}</a-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from "vue";
import { isBoolean, isFunction, isPromise } from "@/utils/is";
const icon = defineComponent({
  name: "Card",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    mask: {
      type: Boolean,
      default: true,
    },
    maskClosable: {
      type: Boolean,
      default: true,
    },
    visible: {
      type: Boolean,
      default: void 0,
    },
    defaultVisible: {
      type: Boolean,
      default: true,
    },
    onBeforeOk: {
      type: Function,
      default: void 0,
    },
    onBeforeCancel: {
      type: Function,
      default: void 0,
    },
    okText: {
      type: String,
      default: void 0,
    },
    cancelText: {
      type: String,
      default: void 0,
    },
    hideCancel: {
      type: Boolean,
      default: false,
    },
    footer: {
      type: Boolean,
      default: true,
    },
  },
  emits: ["update:visible", "ok", "cancel"],
  setup(props, ctx) {
    const prefixCls = "arco-modal";
    const flog = ref(false);

    const _visible = ref(props.defaultVisible);

    const okokText = computed(() => props.okText || "确定");
    const cancancelText = computed(() => props.cancelText || "取消");
    // const okDisplayText = vue.computed(() => props.okText || t("modal.okText"));
    // const cancelDisplayText = vue.computed(() => props.cancelText || t("modal.cancelText"));

    const computedVisible = computed(() => {
      var _a;
      return (_a = props.visible) != null ? _a : _visible.value;
    });

    const classNames = computed(() => {
      return [
        prefixCls,
        // `${prefixCls}-checked`,
      ];
    });

    /**
     * 关闭按钮
     */
    const close = () => {
      _visible.value = false;
      ctx.emit("update:visible", false);
    };

    // 点击遮罩层关闭事件
    function handleMaskClick() {
      if (props.mask && props.maskClosable) {
        handleCancel();
      }
    }
    // 点击取消事件
    const handleCancel = async () => {
      const closed = await new Promise(async (resolve) => {
        let _a;
        if (isFunction(props.onBeforeCancel)) {
          let result = props.onBeforeCancel((closed2 = true) =>
            resolve(closed2),
          );
          if (isPromise(result)) {
            try {
              result = (_a = await result) != null ? _a : true;
            } catch {
              result = false;
            }
          }
          if (isBoolean(result)) {
            resolve(result);
          }
        } else {
          resolve(true);
        }
      });
      if (closed) {
        ctx.emit("cancel");
        close();
      }
    };

    /**
     * 确定按钮
     */

    async function handok() {
      const closed = await new Promise(async (resolve) => {
        let _a;
        if (isFunction(props.onBeforeOk)) {
          let result = props.onBeforeOk((closed2 = true) => resolve(closed2));
          if (isPromise(result)) {
            try {
              result = (_a = await result) != null ? _a : true;
            } catch {
              result = false;
            }
          }
          if (isBoolean(result)) {
            resolve(result);
          }
        } else {
          resolve(true);
        }
      });
      if (closed) {
        ctx.emit("ok");
        close();
      }
    }

    return {
      classNames,
      flog,
      okokText,
      cancancelText,
      handleCancel,
      handok,
      handleMaskClick,
      computedVisible,
    };
  },
});
export default icon;
</script>

<style scoped lang="scss">
.arco-modal-container {
  animation: tans 0.5s ease;
}

@keyframes tans {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
